<template>
    <h1>手机壁纸</h1>
    <view class="wallpaper">
        <view class="item" v-for="(item, index) in types" :key="index" @click="goImgs(item)">
            <text> {{ item.name }}</text>
            <image :src="item.cover" mode="aspectFill" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getPhoneImgTypes } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
const goImgs = (item: any) => {
    uni.navigateTo({
        url: `/pages/imgs/imgs?id=${item.id}&title=${item.name}`
    })
}
const types: any = ref([])
const getData = async () => {
    const res = await getPhoneImgTypes()
    types.value = res.res.category
}
onLoad(() => {
    getData()
})
</script>

<style scoped>
.wallpaper {
    box-shadow: 0.3em 0.3em 0.7em var(--shadow);
    transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding-bottom: 10px !important;
}
</style>